<template>
  <div class="cmp-prescription-template">
    <el-dialog
      v-model="isVisible"
      width="630px"
      @closed="closed"
      @opened="opened"
    >
      <!-- v-if="!previewDataURL" -->
      <div
        v-if="!preImageUrl"
        id="prescriptionTemplate"
        class="prescription-template"
      >
        <i class="normal-pres" style="top: 37px">普通处方</i>
        <span class="normal-pres">处方号：{{ form.id }}</span>
        <div class="title">
          {{ form.orgName }}
          <br />
          <!-- 门诊处方 -->
        </div>
        <div class="header">
          <div>
            <span>姓名：{{ form.patientName }}</span>
            <span>性别：{{ form.sex ? '男' : '女' }}</span>
            <span style="flex: 2">年龄：{{ form.ageName }}</span>
          </div>
          <div>
            <span>病历号：{{ form.medicalRecordId }}</span>
            <span>电话：{{ form.phone }}</span>
            <span>费别：自费</span>
            <span>科别：{{ form.departmentName }}</span>
          </div>
          <div>
            <span style="flex: 1">
              临床初步诊断：{{ form.clinicalDiagnosis }}
            </span>
            <span>就诊号：{{ form.visitNo }}</span>
          </div>
          <div>
            <span>开方日期：{{ renderTime(form.createTime) }}</span>
            <span>皮试结果：{{ form.skinTestResults }}</span>
            <span>
              过敏史：{{
                form.allergicHistory ? form.allergicHistory : '未明确'
              }}
            </span>
          </div>
        </div>
        <div class="body">
          <strong class="Rp-tag">Rp</strong>
          <el-table size="small" :data="form.detailed">
            <XMTableColumn label="药品名" min-width="250">
              <!-- <template v-slot="{ row }"> -->
              <template #default="scope">
                <!-- ="scope" -->
                <div>
                  {{ scope.row.medicineName }}
                  <!-- 信必可都保(吸入粉雾剂) -->
                  <!-- ({{ row.drugForm }}) -->
                  <br />
                  用法：

                  {{ scope.row.singleDosage }}
                  {{ scope.row.frequency }}
                  {{ scope.row.usage }}
                  <!-- {{ scope.row.drugUsageChn }}
                  {{ scope.row.remark }} -->
                  <!-- TODO 可用多少天 -->
                  <!-- <span>可用 30 天</span> -->
                </div>
              </template>
            </XMTableColumn>
            <XMTableColumn label="规格" min-width="100">
              <template #default="scope">{{ scope.row.spec }}</template>
            </XMTableColumn>
            <XMTableColumn label="总量" min-width="100">
              <template #default="scope">
                <span>
                  {{ scope.row.doseTotal }}{{ scope.row.packagingUnit }}
                </span>
              </template>
            </XMTableColumn>
          </el-table>
        </div>
        <div class="footer">
          <div>
            <span>药品总价：{{ form.priceTotal }}</span>
            <span style="min-width: 200px">
              医生签名：
              <img
                style="vertical-align: middle"
                crossorigin="anonymous"
                v-if="form.doctorSignature"
                :src="form.doctorSignature"
                width="120"
                height="60"
                alt=""
              />
              <span v-else>{{ form.doctorName }}</span>
            </span>
            <span>药师审核：</span>
          </div>
          <div style="justify-content: flex-start">
            <span style="flex: 0 1 auto">配药医师：</span>
            <span style="flex: 0 1 auto">核对发药：</span>
          </div>
          <div class="tips">
            注：请勿遗失，处方当日有效，请妥善保管，报销时做核对凭证(非打印无效)
          </div>
        </div>
      </div>
      <div class="previewDataURL" v-if="preImageUrl" style="text-align: center">
        <img style="width: 100%" :src="preImageUrl" />
      </div>
      <template #footer>
        <el-button type="primary" @click="submit" :disabled="!preImageUrl">
          提交
        </el-button>
        <el-button
          @click="
            () => {
              isVisible = false
            }
          "
        >
          取消
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { nextTick, reactive, toRefs, computed } from 'vue'
  import { useStore } from 'vuex'
  import html2Img from './html2Img.vue'
  import filter from '@/hooks/filter.vue'
  // import { loadPrescriptionImgInfo } from '@/api/modules/prescription'
  import { uploadFile } from '@/api/modules/upload'
  // import common from '@/utils/common'
  export default {
    name: 'PrescriptionTemplate',
    setup(props, context) {
      // 初始化及二次赋值
      const d = reactive({
        isVisible: false,
        preImageUrl: null,
        form: {},
        status: null,
      })
      const init = function (id, isVisible = true, status) {
        d.isVisible = isVisible
        d.id = id
        d.status = status
      }

      const toLoad = function (data) {
        d.form = data
        toImg()
        // common.XmLoading()
        // loadPrescriptionImgInfo({ medicalRecordId: id })
        //   .then((res) => {
        //     common.XmLoading(false)
        //     d.form = res.data
        //     toImg()
        //   })
        //   .catch(() => {
        //     common.XmLoading(false)
        //   })
      }
      const opened = function () {
        toLoad(d.id)
      }
      const closed = function () {
        d.isVisible = false
        d.preImageUrl = null
        d.status = status
        d.form = {}
      }

      const submit = function () {
        // TODO 提交代码
        console.log('preImageUrl =' + d.preImageUrl)
        d.isVisible = false
        context.emit('success', { imgUrl: d.preImageUrl, status: d.status })
      }
      const { htmlToImg } = html2Img()

      const toImg = async function () {
        await nextTick()
        htmlToImg('prescriptionTemplate', (base64) => {
          uploadFile(base64).then((res) => {
            d.preImageUrl = res.data
          })
        })
      }

      const store = useStore()
      const userInfo = computed(() => {
        return store.getters.userInfo
      })
      return {
        ...toRefs(d),
        ...filter(),
        init,
        closed,
        opened,
        toImg,
        submit,
        userInfo,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .prescription-template {
    padding: 24px 12px 12px;
    color: #333;
    position: relative;
    min-height: 525px;

    .title {
      text-align: center;
      padding: 6px 0;
      font-size: 16px;
      width: 450px;
      margin: auto;
    }

    .normal-pres {
      font-size: 12px;
      font-style: normal;
      position: absolute;
      right: 16px;
      top: 54px;
    }

    .header {
      margin-bottom: 10px;

      & > div {
        display: flex;

        span {
          width: 120px;
          flex: 1;
          font-size: 14px;
          color: #333;
          line-height: 26px;
          display: inline-block;
        }
      }
    }

    .body {
      border-top: 2px solid #333;
      padding: 12px;
      border-bottom: 2px solid #333;
      margin-bottom: 10px;

      .Rp-tag {
        font-size: 16px;
        font-weight: bold;
      }

      .el-table {
        margin-top: 0;
      }

      :deep(.cell) {
        color: #333;
      }

      .el-table--border::after,
      .el-table--group::after,
      .el-table::before {
        background-color: #fff;
      }

      :deep(.is-leaf) {
        border: 0;
      }
    }

    .footer {
      & > div {
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        span {
          width: 183px;
          line-height: 26px;
          flex: 1;
        }
      }

      .tips {
        font-size: 12px;
        justify-content: start;
        margin-top: 12px;
      }
    }
  }
</style>
